<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas  id="myCanvas" width="700"  height="400"></canvas>
</body>
</html>
<script>
    let can = document.getElementById("myCanvas")
    if(can.getContext){
        let ctx =  can.getContext("2d")
        // ctx.strokeStyle= 'red'
        // ctx.strokeRect(0,0,200,200)
        // ctx.strokeRect(200,200,100,200)
        // ctx.moveTo(100,100)
        // ctx.lineTo(200,100)
        // ctx.stroke()
        // ctx.moveTo(100,100)
        // ctx.lineTo(100,200)
        // ctx.stroke()
        // ctx.moveTo(100,200)
        // ctx.lineTo(200,200)
        // ctx.stroke()
        // ctx.moveTo(200,100)
        // ctx.lineTo(200,200)
        // ctx.stroke()
        // ctx.fillRect(10,10,200,100)
        // ctx.clearRect(35,15,50,20)
        // ctx.clearRect(135,15,50,20)
        // ctx.clearRect(95,55,30,20)
        // ctx.strokeRect(10,120,200,100)
       
        // function getColor() {
        //     var str = '#';
        //     for (var i = 1; i <= 6; i++) {
        //         function getRandom(min, max) { // 调用静态对象Math.random（包含大小值间取一个整数）
        //             return Math.floor(Math.random() * (max - min + 1)) + min;
        //         }
        //         var num = arr[getRandom(0, arr.length - 1)]; // 把从数组中随机索引的一个字符串赋值给变量
        //         /* 十六进制的长度为何要-1（就像十进制为什么只有9而没有10），如果超出则报underfined */
        //         str += num;
        //     }
        //     return str; //遍历索引满6个字符则返回函数值
        // }
            let canWidth = can.width
            let canHeight = can.height
        function Ball(ctx,can){
            this.ctx = ctx
            this.color = this.getColor()
            this.stepX=  parseFloat(Math.random() * 10) 
            this.stepY =  parseFloat(Math.random() * 10) 
            this.r = parseFloat(Math.random() * 8) + 8 
            this.x = parseFloat(Math.random() * 20) 
            this.y = parseFloat(Math.random() * 50) 
            this.canWidth = can.width
            this.canHeight = can.height
        }
        var arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];
        Ball.prototype.getColor = function () {
            var str = '#';
            for (var i = 1; i <= 6; i++) {
                function getRandom(min, max) { // 调用静态对象Math.random（包含大小值间取一个整数）
                    return Math.floor(Math.random() * (max - min + 1)) + min;
                }
                var num = arr[getRandom(0, arr.length - 1)]; // 把从数组中随机索引的一个字符串赋值给变量
                /* 十六进制的长度为何要-1（就像十进制为什么只有9而没有10），如果超出则报underfined */
                str += num;
            }
            return str; //遍历索引满6个字符则返回函数值
        }
        Ball.prototype.move = function(){
            this.x = this.x += this.stepX
            this.y = this.y += this.stepY
            if(this.x >= this.canWidth - this.r){
                this.stepX = -this.stepX
            }
           if(this.x <= 10){
                this.stepX = parseFloat(Math.random() * 8)+ 2  
           }
           if(this.y >= this.canHeight - this.r){
                this.stepY = -this.stepY
           }
           if(this.y <= 10){
                 this.stepY = parseFloat(Math.random() * 8) +2 
           }
        }

        Ball.prototype.darw = function(){
            this.ctx.beginPath()
            this.ctx.arc(this.x,this.y,this.r,0,2*Math.PI)
            this.ctx.fillStyle =  this.color
            // console.log(this.getColor())
            this.ctx.fill()
        }
        var arr = Array.from({length:10}, (v,k) =>  new Ball(ctx,can))
         let time =  setInterval(()=>{
                ctx.clearRect(0,0,canWidth,canHeight)
                arr.forEach(ball=>{
                    ball.move()
                    ball.darw()
                }
            )
         },10)
       
        // window.onload=function(){
        //     var oC=document.getElementById('c1');
        //     var oGC=oC.getContext('2d');
        //     var setArr=[];

        //     setInterval(function(){//进行运动操作

        //         oGC.clearRect(0,0,oC.width,oC.height);

        //         for(var i=0;i<setArr.length;i++){
        //             setArr[i].r+=1;//半径每次增大1
        //             setArr[i].c4-=0.01;

        //             if(setArr[i].c4<=0){//删除背景为透明的，避免元素过大
        //                setArr.splice(i,1);
        //             }
        //         }
        //         for(var i=0;i<setArr.length;i++){
        //             oGC.beginPath();
        //             oGC.fillStyle='rgba('+setArr[i].c1+','+setArr[i].c2+','+setArr[i].c3+','+setArr[i].c4+')';
        //             oGC.moveTo(setArr[i].x,setArr[i].y);
        //             oGC.arc(setArr[i].x,setArr[i].y,setArr[i].r,0,360*Math.PI/180,false);
        //             oGC.closePath();
        //             oGC.fill();
        //         }

        //     },1000/60);

        //     setInterval(function(){//添加数据

        //         var x=Math.floor(Math.random()*oC.width);//随机产生圆的x值
        //         var y=Math.floor(Math.random()*oC.height);//随机产生圆的y值
        //         var r=4;//圆的半径
        //         //随机产生圆的颜色rgb
        //         var c1=Math.floor(Math.random()*255);
        //         var c2=Math.floor(Math.random()*255);
        //         var c3=Math.floor(Math.random()*255);
        //         var c4=1;//设置透明度

        //         setArr.push({
        //             x : x,
        //             y : y,
        //             r : r,
        //             c1 : c1,
        //             c2 : c2,
        //             c3 : c3,
        //             c4 : c4
        //         });

        //     },500);//往数组中放元素
        // }
      
    }
   
</script>
<style>
    #myCanvas{
        /* border: 1px blue solid; */
    }
</style>